<template>
  <div id="temp">
    <!--1.首页-->
    <mt-header fixed title="以考促学"></mt-header>
    <!--2.选项卡-->
    <div id="tempTitle">
      <ul class="tabs clearfix">
        <li v-for="(tab,index) in tabsName">
          <span class="tab-link" @click="tabsSwitch(index)"
                v-bind:class="{active:tab.isActive}">{{tab.name}}</span>
        </li>
      </ul>
    </div>
    <div class="cards">
      <!--第一块内容-->
      <div class="tab-card" style="display: block;">
        <div class="cards">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list">
              <!--<router-link v-bind="{to:'/activity/activityinfo/'+item.id}">-->
                <div class="mui-media-body">
                  <span class="isState">未开始</span>
                  基础技能测试
                  <!--{{item.title}}-->
                  <!--<p class='mui-ellipsis' v-text="item.zhaiyao"></p>-->
                  <div class="ft">
                    <span>{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                    截止
                    <span class="click">{{item.click}}人已参与</span>
                  </div>
                </div>
              <!--</router-link>-->
            </li>
          </ul>
        </div>
      </div>
      <!--第二内容-->
      <div class="tab-card">
      <!--<div class="tab-card" style="background: #f46b49">-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->
        <!--<div>dddd</div>-->

      </div>
    </div>
  </div>
</template>
<script>
  //     按需导入访问错误
  import {Toast} from 'mint-ui';
  import kit from '../../kits/apikit.js'

  export default {
    data() {
      return {
        list: [],
        tabsName: [{
          name: "待考",
          isActive: true
        }, {
          name: "已考",
          isActive: false
        }],
        active: false
      }
    },
    created() {
      this.getactitylist();
    },
    methods: {
      //党章常规
      getactitylist() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.list = body.message;
        });
      },

      //规章制度
      tabsSwitch: function (tabIndex) {
        var tabCardCollection = document.querySelectorAll(".tab-card"),
          len = tabCardCollection.length;
        for (var i = 0; i < len; i++) {
          tabCardCollection[i].style.display = "none";
          this.tabsName[i].isActive = false;
        }
        this.tabsName[tabIndex].isActive = true;
        tabCardCollection[tabIndex].style.display = "block";
      }
    }
  }
</script>
<style scoped>
  /*头部样式*/
  .mint-header{
    height: .9rem;
    background-color: #4284D8;
    font-size: .35rem;
  }
  /*选项卡样式*/
  #tempTitle {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: .9rem;
    background-color: #fff;
    z-index: 33;
  }

  .tabs li {
    float: left;
    list-style: none;
    width: 50%;
  }

  .tabs .tab-link {
    display: block;
    width: 100%;
    height: 49px;
    text-align: center;
    line-height: 49px;
    color: #808080;
    text-decoration: none;
  }

  .tabs .tab-link.active {
    height: 47px;
    border-bottom: 2px solid #EC542E;
    color: #EC542E;
    transition: .3s;
  }

  .cards {
    float: left;
    width: 100%;
    padding-top: .8rem;
  }

  .cards .tab-card {
    display: none;
  }
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  /*下面内容*/
  .isState {
    background-color: #cccccc;
    /*background-color: rgb(236, 84, 46);*/
    color: #ffffff;
    border-radius: 1.5px;
    padding: 1px 2px;
    font-size: .2rem;
  }

  /*2.图片大小*/
  .mui-table-view{
    margin-top: .2rem;
  }
  .mui-table-view img {
    height: 80px;
    width: 80px;

  }

  .mui-table-view .mui-media-object {
    max-width: 80px;
    line-height: 80px;
  }

  .ft {
    margin-top: 1.5em;
    font-size: 10px;
    color: #AEAEAE;

  }

  .click {
    float: right;
  }
</style>
